<template>
	<view>
		<!-- 以前写项目，一个文件夹起名字，然后里面放的都是index.vue -->
		<MySearch @click="toSearch"></MySearch>

		<view class="scroll-box">
			<!-- 左边滚动盒 -->
			<scroll-view :style="{ height: wh + 'px' }" class="left-scroll-box" scroll-y="true">
				<view class="scroll-item" :class="{active: index === curIdx}" v-for="(item, index) in cateList"
					@click="changeCate(index)">
					{{ item.cat_name }}
				</view>
			</scroll-view>

			<!-- 右边滚动盒 -->
			<scroll-view v-if="cateList.length" :scroll-top="scrollTop" :style="{ height: wh + 'px' }"
				class="right-scroll-box" scroll-y="true">
				<!-- 遍历的2级 -->
				<view class="level2" v-for="item in cateList[curIdx].children">
					<view class="title">/{{ item.cat_name }}/</view>
					<!-- 三级盒子 -->
					<view class="level3-box">
						<!-- 遍历2级里的children，遍历出3级 -->
						<navigator :url="`/subpkg/goods_list/goods_list?cid=${level3.cat_id}` " class="level3-item"
							v-for="level3 in item.children">
							<image :src="level3.cat_icon">
							</image>
							<view class="txt">{{ level3.cat_name }}</view>
						</navigator>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import tabbarBadge from '../../mixins/tabbar-badge.js'
	export default {
		// 变量都不加引号
		mixins: [tabbarBadge],
		async onLoad() {
			// 发请求是异步操作，它不影响别的代码执行
			// 比如说它发请求要3秒，在这3秒的时候，可能生命周期早就走完了
			// 页面已经经过第一次渲染了，因为数组还是空的就报错了
			// 为什么后面又没问题？不影响任何效果？
			// 原因是早晚有一天，我们的请求要发完的，那个时候cateList有数据了
			// 因为都是响应式的数据，数据一变界面会跟着变
			const res = await uni.$http.get('categories')
			console.log(res)
			this.cateList = res.data.message
		},

		// 当前页面第一次dom加载完毕，类似于以前的mounted
		onReady() {
			// 获取屏幕可用高度
			uni.getSystemInfo({
				success: (res) => {
					// console.log('onready', res.windowHeight)
					// 把获取的可用高度，赋值给wh这个变量
					this.wh = res.windowHeight - 50;
				}
			})

			// // uniapp里把所有的方法都promise化了
			// uni.getSystemInfo()
			// 	.then(res => {
			// 		console.log(res)
			// 	})
		},

		data() {
			return {
				wh: 0,
				cateList: [],
				curIdx: 0,
				// 内部会对这个值做检测
				// 发现原本是0，后面你给的值还是0，就觉得哥们，你没变过
				// 所以我不改界面
				scrollTop: 0
			};
		},
		methods: {
			toSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			// 一级菜单被点击事件
			changeCate(index) {
				this.curIdx = index
				// 滚动条滚到最上
				// 这个值要么是0，要么是1，反正每次来值都不一样
				// 都不一样就能触发它去更新界面
				this.scrollTop = this.scrollTop == 0 ? 1 : 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-box {
		display: flex;

		.left-scroll-box {
			flex: 1;
			background-color: #f7f7f7;

			.scroll-item {
				// 文字水平居中
				text-align: center;
				// 行高
				line-height: 120rpx;
				position: relative;

				&.active {
					background-color: #fff;

					&::before {
						content: '';
						width: 4rpx;
						height: 60rpx;
						background-color: #c00;
						position: absolute;
						left: 0;
						top: 50%;
						// 往上回高度一半
						transform: translateY(-50%);
					}
				}
			}
		}

		.right-scroll-box {
			flex: 3;

			.level2 {
				font-weight: 700;
				font-size: 13px;

				.title {
					text-align: center;
					margin-bottom: 10rpx;
				}


				.level3-box {
					display: flex;
					flex-wrap: wrap;

					.level3-item {
						width: 33.33%;
						text-align: center;
						margin-bottom: 20rpx;

						image {
							width: 90rpx;
							height: 90rpx;
						}

						.txt {
							font-weight: 400;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>
